<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="container">
			<!-- 表格的五种状态类
			.table-success 绿色背景
			.table-active 当前活动信息，灰色
			.table-primary 蓝色背景
			.table-warning 黄色背景
			.table-danger 红色背景
			.table-info 浅蓝色背景
			.table-secondary 灰色背景
			.table-light 浅灰色背景
			.table-dark  深灰色背景-->
			<table class="table table-sm  table-warning table-bordered table-hover">
				<!-- 分两部分 thead 表头区域 tbody 正文区域 -->
			<thead >
				<tr>
					<th>
						序号
					</th>
					<th>
						学号
					</th>
						<th>
						姓名
					</th>	
					<th>
						专业
					</th>
					<th>
						课程
					</th>
				</tr>
				
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>001</td>
					<td>Tom</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>	<tr>
					<td>2</td>
					<td>002</td>
					<td>Jack</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>	<tr>
					<td>3</td>
					<td>003</td>
					<td>Lucy</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>
			</tbody>
			</table>
		</div>
		<div class="container">
			<table class="table table-dark table-bordered">
				<!-- 分两部分 thead 表头区域 tbody 正文区域 -->
			<thead class="thead-dark">
				<tr>
					<th>
						序号
					</th>
					<th>
						学号
					</th>
						<th>
						姓名
					</th>	
					<th>
						专业
					</th>
					<th>
						课程
					</th>
				</tr>
				
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>001</td>
					<td>Tom</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>	<tr>
					<td>2</td>
					<td>002</td>
					<td>Jack</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>	<tr>
					<td>3</td>
					<td>003</td>
					<td>Lucy</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>
			</tbody>
			</table>
		</div>
		<div class="container">
			<table class="table table-dark table-bordered">
				<!-- 分两部分 thead 表头区域 tbody 正文区域 -->
			<thead class="thead-dark">
				<tr>
					<th>
						序号
					</th>
					<th>
						学号
					</th>
						<th>
						姓名
					</th>	
					<th>
						专业
					</th>
					<th>
						课程
					</th>
				</tr>
				
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>001</td>
					<td>Tom</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>	<tr>
					<td>2</td>
					<td>002</td>
					<td>Jack</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>	<tr>
					<td>3</td>
					<td>003</td>
					<td>Lucy</td>
					<td>计算机科学与技术</td>
					<td>Vue.js</td>
					
				</tr>
			</tbody>
			</table>
		</div>
		
	</body>
</html>
